<template>
  <!-- viewBox设置为svg画布尺寸的一半 -->
  <svg
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    :width="w"
    :height="h"
    :viewBox="viewBox"
    :style="{backgroundColor: props.background}"
  >
    <slot></slot>
  </svg>
</template>

<script setup>
  import { computed } from 'vue'
  import { SCREEN } from '@/utils/global'
  import { useResizeStore } from '@/store'

  const props = defineProps({
    background: {
      type: String,
      default: '#757575'
    }
  })

  const store = useResizeStore()

  const w = computed(() => SCREEN.width * store.resize)
  const h = computed(() => SCREEN.height * store.resize)
  // const viewBox = computed(() => `0 0 ${w.value / 2} ${h.value / 2}`)
  const viewBox = `0 0 ${SCREEN.width / 2} ${SCREEN.height / 2}`
</script>

<style lang="scss" scoped>

</style>